<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        body{
            margin:0;
        }/*消除背景编剧“白边”*/
        header{
            height: 700px;
            background-image: url(1.jpg);/*背景图*/
            background-size: cover;
            display: flex;
            align-items: center;/*上下居中*/
            justify-content: center;/*左右居中*/

        }
        header>img{
            height: 600px;
            width:600px;
        }
       header>p{
            position: absolute;
            top: 200px;
            right:185px;
            font-size:35px;
            border: 100px;
            color: #ff00ff;

               }

        header>p>a{
            text-decoration: none;/*去掉下划线*/
        }
        button{
            height: 100px;
            width: 400px;
            position:relitive;/*相对定位*/
            top: 100px;/*顶部距离*/
            background-color: transparent;/*将标签背景变透明*/
            font-size: 50px;/*字体大小*/
            color: #ff00ff;/*字体颜色*/
            font-weight:800;/*字体粗细*/
            border:1px solid #fff;/*边框*/
            outline: none;
            cursor: pointer;
            border-radius: 70%;/*圆*/
        }
        button:hover{
                background-color: #FFFFE0;/*背景色*/
                opacity: 0.8;
                color: #EE82EE;/*鼠标点上去时字的颜色*/
        }

        div{
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
          /*  background-color: #8470FF;
*/
        }
        span{
            font-size: 64px;
            color:#eed2ee;
        }
        span:hover{
            color: #FF69B4;
        }
        article{
            height: 600px;
            background-image: url(2.jpg);
            background-size: cover;
            background-attachment:fixed;/*固定背景*/
        }
        main{
            height: 580px;
            background-image:url(3.jpg);
            background-size: cover;
        }
        main{
            height: 900px;
            position: relative;
        }
        main>img{
            position: absolute;
            bottom:450px;/*距离底面距离*/
            left:50px;
            weight:550px;
            width: 1000px;
        }
        main>aside{
            width: 600px;
            position: absolute;
            top: 550px;
            right: 150px;
            text-align: right;
        }
        aside>h1{
               font-size: 35px;
        }
        aside>p{
              font-size: 25px;
              color:#555;
        }
        aside>p>a{
            text-decoration: none;
            color: #836FFF;
        }
        map{
            display:block;
            width: 100%;
            height: 600px;
        }


    </style>
</head>
<body>
    <header id="header" class="">
    <img src="13.gif" alt="">
       <button type="http://image.so.com/z?ch=wallpaper&t1=165">梦的方向</button>

    <p>
      <a href="https://baike.so.com/doc/5406193-5644018.html" title="">星空百科</a>
       <a href="http://image.so.com/i?src=360pic_strong&z=1&i=3&cmg=12e8439d8e802f6fb7515b0e2d5b063e&q=%E5%AE%87%E5%AE%99%E6%98%9F%E7%A9%BA%E9%AB%98%E6%B8%85%E5%A4%A7%E5%9B%BE" title="">星空图片</a>
       </p>

    </header><!-- /header --><!-- 头部 -->
    <div>
       <span>生活——就是不断向梦想的追逐！</span>
    </div>
    <article></article><!-- 文章标签 -->
    <main>
        <img src="7.jpg" alt="">
         <aside>
             <h1>----浩渺无垠的宇宙,星光载满了多少男儿的爱恋银河轨道战队的梦幻回想</h1>
             <p>  战士们用血肉在圣姬的祭坛前起誓,永恒的爱人,不可没灭的命运的羁绊,如何延续和守护对你的爱恋,将彼此的誓言驻扎在广袤的星空,星星为我们作证,带着怨恨情仇,留着生死的记忆,一同去对抗CHAOS世界的神,为家,为爱,为情……</p>
             <p><a href="https://www.so.com/s?q=%E5%A4%AA%E7%A9%BA%E7%9A%84%E5%A5%A5%E7%A7%98&src=srp_suggst_3.2.2&fr=dlm&psid=d7afb0d5bac1153e34e1a8edb10fdabe&ls=n503424099a&eci=37037afdecc67e9a&nlpv=suggest_3.2.2" title="">了解更多</a></p>
         </aside>
    </main>
    <hr color="#7EC0EE">
    <map id="here" >

    </map><!-- 地图标签 -->

</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
   <script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023, 34.331407);
    map.centerAndZoom(point, 19);
    window.map = map;
}
initMap();
</script>



</html>